<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <p>
    Edit <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
  <!-- <Composition /> -->
  <!-- <ModelButton /> -->

  <!-- 全局组件 -->
  <comp></comp>

  <!-- v-model的使用 -->
  <!-- <VmodelTest v-model="count"></VmodelTest> -->
  <VmodelTest v-model:count="count"></VmodelTest>
  <!-- 等效于 -->
  <!-- <VmodelTest :count="count" @update:count="count=$event"></VmodelTest> -->

  <!-- render api 发生变化 -->
  <RenderTest v-model:count="count"></RenderTest>

  <!-- 函数式组件 -->
  <Functional level="3">这是一个动态的h元素</Functional>

  <!-- 自定义指令 -->
  <p v-highlight="'yellow'">Highlight this text bright yellow</p>

  <!-- 动画 -->
  <TransitionTest></TransitionTest>

  <!-- 编程方式发送和监听事件 -->
  <button @click="sendMsg">emit event</button>
</template>

<script>
import { h } from "vue";
import Composition from "./Composition.vue";
import ModelButton from "./ModelButton.vue";
import VmodelTest from "./VmodelTest.vue";
import Functional from "./Functional.vue";
import TransitionTest from "./TransitionTest.vue";

// 事件派发和监听
import mitt from "mitt";

export const emitter = mitt();

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      count: 0,
    };
  },
  components: {
    Composition,
    ModelButton,
    VmodelTest,
    Functional,
    RenderTest: {
      props: {
        count: {
          type: Number,
          default: 0,
        },
      },
      // 也可以
      // methods: {
      //   onClick() {
      //     this.$emit("update:count", this.count + 1);
      //   }
      // },
      render() {
        const emit = this.$emit;
        const count = this.count;
        return h("div", [
          h(
            "div",
            {
              onClick() {
                emit("update:count", count + 1);
              },
            },
            `I am RenderTest: ${this.count}`
          ),
        ]);
      },
    },
    TransitionTest,
  },
  methods: {
    sendMsg() {
      emitter.emit("someEvent", "fooooo");
    },
  },
};
</script>
